/**
 * @author FFFengMJL<781131011@qq.com>
 * 饼图，可以变成环形或者非规则饼图
 */
import { Component, Input, OnInit, OnChanges } from '@angular/core';
import { ChartData } from '../chart-option';

@Component({
  selector: 'app-pie-chart',
  templateUrl: './pie-chart.component.html',
  styleUrls: ['./pie-chart.component.scss'],
})
export class PieChartComponent implements OnChanges {
  @Input() title = ''; // 图的标题
  @Input() subText = ''; // 额外内容
  @Input() data: ChartData[] = []; // 数据
  @Input() roseType: '' | 'pie' | 'circle' = ''; // 什么形状，空为饼图，pie 为大小区分, circle 为环
  @Input() centerText = false;
  @Input() fontSize = 30;
  @Input() givenHeight = '400px';
  theme: string;
  options = {};

  getHeight() {
    return this.givenHeight;
  }

  constructor() {}

  ngOnChanges() {
    // 初始化数组
    this.options = {
      title: {
        text: this.title,
        subtext: this.subText,
        x: this.centerText ? 'center' : 'left',
        y: this.centerText ? 'center' : 'top',
        subtextStyle: {
          fontSize: this.fontSize
        },

      },
      legend: {
        x: 'center',
        y: 'bottom',
        data: this.dataKey,
      },
      tooltip: {
        trigger: 'item',
        formatter: '{b} : {c} ({d}%)',
        confine: true
      },
      calculable: true,
      series: [
        {
          // name: 'area',
          type: 'pie',
          radius: this.roseType === 'circle' ? ['40%', '50%'] : ['0%', '50%'],
          center: ['50%', '50%'],
          roseType: this.roseType === 'circle' ? '' : this.roseType,
          data: this.data,
          hoverAnimation: false,
          label: {
            show: false
          },
        }
      ]
    };
  }
  /**
   * 获取数据的名称
   * @return string[] 名称的数组
   */
  get dataKey() {
    const key = [];
    this.data.map((kv) => key.push(kv.name));

    return key;
  }
}
